<!-- 产品碳足迹-碳足迹报告 -->

<template>
  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="m_aCardBox">
          <div class="tabBox">
            <div class="table-page-search-wrapper">
              <a-form
                :model="queryParam"
                layout="inline"
                @keyup.enter.native="searchQuery"
              >
                <a-row :gutter="24">
                  <a-col :span="6">
                    <a-form-model-item :label="$t('message.Product_name')">
                      <a-input
                        v-model="queryParam.productName"
                        allowClear
                        :placeholder="$t('message.Please_enter')"
                      ></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6"> </a-col>
                  <a-col :span="6"> </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="" style="">
                      <div
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: flex-end;
                        "
                      >
                        <a-button type="primary" @click="searchQuery">{{
                          $t("message.Search")
                        }}</a-button>
                        <a-button
                          style="margin-left: 8px"
                          @click="searchReset"
                          >{{ $t("message.Reset") }}</a-button
                        >
                      </div>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <!-- 表格 -->
          <div class="cardBox">
            <div class="m_mt24">
              <a-table
                ref="table"
                :columns="columns"
                :dataSource="dataSource"
                :loading="loading"
                :pagination="ipagination"
                :scroll="{ x: true }"
                :bordered="false"
                class=""
                rowKey="id"
                size="middle"
                @change="handleTableChange"
              >
                <div slot="Unit" slot-scope="text, record">
                  {{ record.numeratorUnit }}/{{ record.denominatorUnit }}
                </div>
                <template slot="productWeight" slot-scope="text, record">
                  {{ record.productWeight }}{{ record.productWeightUnit }}
                </template>
                <template slot="calculateNumber" slot-scope="text, record">
                  {{ record.calculateNumber }}{{ record.productUnitName }}
                </template>
                <template slot="lifeCycleType" slot-scope="text, record">
                  <div class="" v-if="text == 1">
                    {{ $t("message.From_cradle_to_gate") }}
                  </div>
                  <div class="" v-else-if="text == 2">
                    {{ $t("message.From_cradle_to_grave") }}
                  </div>
                  <div class="" v-else-if="text == 3">
                    {{ $t("message.Customize") }}
                  </div>
                </template>
                <template slot="dateRange" slot-scope="text, record">
                  <div class="">
                    {{ record.beginTime ? record.beginTime.slice(0, 10) : "" }}
                  </div>
                  <div>{{ $t("message.to") }}</div>
                  <div class="">
                    {{ record.endTime ? record.endTime.slice(0, 10) : "" }}
                  </div>
                </template>
                <div
                  class="m_cbFlex"
                  style="padding: 0 5px"
                  slot="action"
                  slot-scope="text, record"
                >
                  <a @click="onUpData(record)">{{ $t("message.Edit") }}</a>

                  <a @click="onPreview(record)">{{ $t("message.Preview") }}</a>

                  <a @click="onDownload(record)">{{
                    $t("message.Download")
                  }}</a>
                  <a-popconfirm
                    :title="$t('message.Confirm_delete')"
                    :cancelText="$t('message.Cancel')"
                    :okText="$t('message.Confirm')"
                    @confirm="() => onDelete(record)"
                  >
                    <a>{{ $t("message.Delete") }}</a>
                  </a-popconfirm>
                </div>
              </a-table>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <a-modal
      :footer="null"
      :visible="isShowDetailPopup"
      @cancel="handleCancel"
      :width='850'
    >
      <vue-office-docx :src="docUrl"></vue-office-docx>
    </a-modal>
    <!--  碳足迹报告弹窗  -->
     
    <section class="m_popupBox" style="overflow: hidden" v-if="GenerateAcar">
            <GenerateAcarbonfoot ref="eneratecares" @back="onBack" />    
    </section>
  </div>
</template>

<script>
import { cloneObject } from "@/utils/util";
import { deleteAction, getAction, postAction } from "@/api/manage";
import VueOfficeDocx from "@vue-office/docx";
import GenerateAcarbonfoot from "@/views/module_managePlatform/GenerateAcarbonfoot/index.vue";
export default {
  name: "footprintReportView",
  components: {
    VueOfficeDocx,
    GenerateAcarbonfoot,
  },
  data() {
    return {
      loading: false,
      queryParam: {},
      isShowDetailPopup: false,
      docUrl: "",
      GenerateAcar: false,
      columns: [
        {
          title: this.$t("message.Product_name"),
          align: "center",
          dataIndex: "productName",
          width: 150,
        },
        {
          title: this.$t("message.Product_NO"),
          align: "center",
          dataIndex: "productCode",
          width: 150,
        },
        {
          title: this.$t("message.Carbon_emissions"),
          align: "center",
          dataIndex: "carbonEmissionTotal",
          width: 150,
        },
        {
          title: this.$t("message.Specifications_and_models"),
          align: "center",
          dataIndex: "productSpecification",
          width: 150,
        },
        {
          title: this.$t("message.Unit"),
          align: "center",
          dataIndex: "productUnitName",
          width: 70,
        },
        {
          title: this.$t("message.Product_weight"),
          align: "center",
          dataIndex: "productWeight",
          scopedSlots: { customRender: "productWeight" },
          width: 150,
        },
        {
          title: this.$t("message.Accounting_quantity"),
          align: "center",
          dataIndex: "calculateNumber",
          scopedSlots: { customRender: "calculateNumber" },
          width: 70,
        },
        {
          title: this.$t("message.Life_cycle_boundary"),
          align: "center",
          dataIndex: "lifeCycleType",
          scopedSlots: { customRender: "lifeCycleType" },
          width: 150,
        },
        {
          title: this.$t("message.Data_cycle"),
          align: "center",
          scopedSlots: { customRender: "dateRange" },
          width: 150,
        },
        {
          title: this.$t("message.Founder"),
          align: "center",
          dataIndex: "createBy",
          width: 70,
        },
        {
          title: this.$t("message.Create_date"),
          align: "center",
          dataIndex: "createTime",
          width: 150,
        },
        {
          title: this.$t("message.Handle"),
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 160,
          scopedSlots: { customRender: "action" },
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dataSource: [], // 数据
    };
  },
  created() {
    this.getData();
  },
  methods: {
    onBack() {
      this.GenerateAcar = false;
      this.getData();
    },
    handleCancel() {
      this.isShowDetailPopup = false;
    }
    /**
     * 编辑
     */,
    onUpData(item) {
      console.log(item);
      this.GenerateAcar = true;
      setTimeout(() => {
        this.$refs.eneratecares.type = 2;
        this.$refs.eneratecares.formObj.calculateId = item.id;
        this.$refs.eneratecares.getReportParams();
      }, 100);
    },
    /**
     * 预览
     */
    onPreview(item) {
      this.isShowDetailPopup = true;
      this.docUrl = window._CONFIG["staticDomainURL"] + "/" + item.reportAddress;

      // window.open(url, '_blank')
    },
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 下载碳足迹报告
     */
    onDownload(item) {
      let url = window._CONFIG["staticDomainURL"]  + "/" + item.reportAddress;
      console.log("onDownloadReport", url);
      window.open(url, "_blank");
    },
    /**
     * 删除碳足迹报告
     */
    onDelete(item) {
      deleteAction("/footprintProduct/cyFootprintProduct/delReport", {
        calculateId: item.id,
      }).then((res) => {
        if (res.success) {
          this.$message.success(this.$t("message.delete_success"));
          this.getData();
        }
      });
    },
    /**
     * 查询
     */
    searchQuery() {
      console.log("searchQuery");
      this.ipagination.current = 1;
      this.getData();
    },
    /**
     * 重置
     */
    searchReset() {
      console.log("searchReset");
      this.queryParam = {};
      this.ipagination.current = 1;
      this.getData();
    },
    handleTableChange(pagination) {
      console.log(pagination);
      this.ipagination = pagination;
      this.getData();
    },
    getData() {
      let reqData = cloneObject(this.queryParam);
      reqData.pageNo = this.ipagination.current;
      reqData.pageSize = this.ipagination.pageSize;
      getAction("/footprintProduct/cyFootprintProduct/getReport", reqData).then(
        (res) => {
          if (res.success) {
            this.dataSource = res.result.records || [];
            this.ipagination.total = res.result.total;
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal{
  padding: 0 !important;
  /deep/.docx-wrapper{
    background: #ffffff;
  }
}
/deep/ .ant-card-body {
  background: #f5f8f7;
}

.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 3px;
}
</style>
